<!DOCTYPE html>
<html>
<head>
    <title>AZ-204 Question 97</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .question-container {
            border: 1px solid #ddd;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 5px;
        }
        .drag-area {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
        .drag-item {
            padding: 8px 12px;
            background-color: #e0e0e0;
            border-radius: 4px;
            cursor: move;
            user-select: none;
        }
        .drop-area {
            margin: 15px 0;
            padding: 10px;
            min-height: 50px;
            border: 2px dashed #aaa;
            border-radius: 5px;
        }
        .drop-zone {
            margin-bottom: 15px;
        }
        .drop-zone-label {
            font-weight: bold;
            margin-bottom: 5px;
        }
        .answer {
            display: none;
            margin-top: 20px;
            padding: 15px;
            background-color: #f0f8ff;
            border-left: 4px solid #1e90ff;
            border-radius: 4px;
        }
        .answer-button {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .answer-button:hover {
            background-color: #45a049;
        }
        .correct {
            background-color: #dff0d8;
            border-left: 4px solid #3c763d;
        }
        .explanation {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="question-container">
        <h3>QUESTION NO: 97 DRAG DROP</h3>
        <p>You are developing a microservices solution. You plan to deploy the solution to a multinode Azure Kubernetes Service (AKS) cluster.</p>
        <p>You need to deploy a solution that includes the following features:</p>
        <ul>
            <li>reverse proxy capabilities</li>
            <li>configurable traffic routing</li>
            <li>TLS termination with a custom certificate</li>
        </ul>
        <p>Which components should you use? To answer, drag the appropriate components to the correct requirements. Each component may be used once, more than once, or not at all. You may need to drag the split bar between panes or scroll to view content.</p>
        <p><strong>NOTE:</strong> Each correct selection is worth one point.</p>
        
        <div class="drag-area" id="components">
            <div class="drag-item" draggable="true" data-value="Helm">Helm</div>
            <div class="drag-item" draggable="true" data-value="Draft">Draft</div>
            <div class="drag-item" draggable="true" data-value="Brigade">Brigade</div>
            <div class="drag-item" draggable="true" data-value="kubectl">kubectl</div>
            <div class="drag-item" draggable="true" data-value="Ingress Controller">Ingress Controller</div>
            <div class="drag-item" draggable="true" data-value="CoreDNS">CoreDNS</div>
            <div class="drag-item" draggable="true" data-value="Virtual Kubelet">Virtual Kubelet</div>
        </div>
        
        <div class="drop-zone">
            <div class="drop-zone-label">1. Deploy solution:</div>
            <div class="drop-area" data-target="1"></div>
        </div>
        
        <div class="drop-zone">
            <div class="drop-zone-label">2. View cluster and external IP addressing:</div>
            <div class="drop-area" data-target="2"></div>
        </div>
        
        <div class="drop-zone">
            <div class="drop-zone-label">3. Implement a simple, public-IP endpoint that is routed to multiple microservices:</div>
            <div class="drop-area" data-target="3"></div>
        </div>
        
        <button class="answer-button" onclick="showAnswer()">查看答案</button>
        
        <div class="answer" id="answer">
            <h4>正确答案:</h4>
            <div class="correct">
                <p>1. Deploy solution: <strong>Helm</strong></p>
                <p>2. View cluster and external IP addressing: <strong>kubectl</strong></p>
                <p>3. Implement a simple, public-IP endpoint that is routed to multiple microservices: <strong>Ingress Controller</strong></p>
            </div>
            <div class="explanation">
                <h4>说明:</h4>
                <p><strong>Helm</strong> 是 Kubernetes 的包管理工具，用于部署解决方案到 AKS 集群。</p>
                <p><strong>kubectl</strong> 是 Kubernetes 命令行工具，用于查看集群和外部 IP 地址。</p>
                <p><strong>Ingress Controller</strong> 提供反向代理功能、可配置的流量路由和 TLS 终止，用于实现简单的公共 IP 端点路由到多个微服务。</p>
                <p>其他组件：</p>
                <ul>
                    <li>Draft - 用于简化 Kubernetes 应用程序开发的工具</li>
                    <li>Brigade - Kubernetes 的事件驱动脚本工具</li>
                    <li>CoreDNS - Kubernetes 的 DNS 服务器</li>
                    <li>Virtual Kubelet - 用于将 Kubernetes 扩展到无服务器容器平台</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        let draggedItem = null;
        
        // Setup drag events for all draggable items
        document.querySelectorAll('.drag-item').forEach(item => {
            item.addEventListener('dragstart', function(e) {
                draggedItem = this;
                setTimeout(() => {
                    this.style.opacity = '0.4';
                }, 0);
            });
            
            item.addEventListener('dragend', function() {
                this.style.opacity = '1';
            });
        });
        
        // Setup drop events for all drop areas
        document.querySelectorAll('.drop-area').forEach(zone => {
            zone.addEventListener('dragover', function(e) {
                e.preventDefault();
                this.style.backgroundColor = '#e9e9e9';
            });
            
            zone.addEventListener('dragleave', function() {
                this.style.backgroundColor = '';
            });
            
            zone.addEventListener('drop', function(e) {
                e.preventDefault();
                this.style.backgroundColor = '';
                
                // Remove any existing item in this drop zone
                while (this.firstChild) {
                    this.removeChild(this.firstChild);
                }
                
                // Create a clone of the dragged item and add it to the drop zone
                const clone = draggedItem.cloneNode(true);
                clone.style.opacity = '1';
                clone.style.cursor = 'default';
                clone.draggable = false;
                this.appendChild(clone);
                
                // Store the value in a data attribute for checking later
                this.dataset.value = draggedItem.dataset.value;
            });
        });
        
        function showAnswer() {
            document.getElementById('answer').style.display = 'block';
        }
    </script>
</body>
</html>
